<template>
  <div class="hello">
    <App></App>
    <!--顶部标题栏-->
    <x-header :left-options="{showBack: false}">分析</x-header>
    <!--&lt;!&ndash;grid&ndash;&gt;-->
    <!--<grid :cols="col" :show-lr-borders="false" :show-vertical-dividers="false" style="border:none;background-color:#fff;">-->
      <!--<grid-item @on-item-click="onItemClick('moni')">-->
        <!--<img slot="icon" src="../assets/images/home/dynamic_fill.png">-->
        <!--<span slot="label">API调用监控</span>-->
      <!--</grid-item>-->
      <!--<grid-item @on-item-click="onItemClick('warn')" >-->
        <!--<img slot="icon" src="../assets/images/home/remind_fill.png">-->
        <!--<span slot="label">服务器监控</span>-->
      <!--</grid-item>-->
      <!--<grid-item link="/component/cell" @on-item-click="onItemClick">-->
        <!--<img slot="icon" src="../assets/images/home/more_fill.png">-->
        <!--<span slot="label">微服务监控</span>-->
      <!--</grid-item>-->
      <!--<grid-item @on-item-click="onItemClick('moni')">-->
        <!--<img slot="icon" src="../assets/images/moni/moni_access.png">-->
        <!--<span slot="label">API调用日志</span>-->
      <!--</grid-item>-->
      <!--<grid-item @on-item-click="onItemClick('moni')">-->
        <!--<img slot="icon" src="../assets/images/moni/moni_error.png">-->
        <!--<span slot="label">API错误日志</span>-->
      <!--</grid-item>-->
    <!--</grid>-->

    <!--今日调用量-->
    <divider style="margin-top:20px;">今日学习</divider>
    <v-chart
      :data="data"
      :padding="[20, 'auto']">
      <v-tooltip disabled />
      <v-scale y :options="yOptions" />
      <v-pie :radius="0.85" :inner-radius="0.7" series-field="name" :colors="['#FE5D4D','#3BA4FF','#737DDE']" />
      <v-legend :options="legendOptions" />
      <v-guide type="html" :options="htmlOptions" />
    </v-chart>

    <!--API调用7日数据-->
    <divider style="margin-top:20px;">近7日学习走势</divider>
    <v-chart :data="sevenData">
      <v-scale y :min="0" /> <!-- 默认 y 轴数值从数据的最小值到最大值，此处重置为从 0 开始 -->
      <v-point :styles="{
        stroke: '#fff',
        lineWidth: 1
      }"/>
      <v-tooltip :show-item-marker="false" :on-show="onShow" /> <!-- onShow 为 F2 属性而非事件-->
      <v-line />
    </v-chart>
    <div style="height:75px;"></div>

    <!--底部导航-->
    <myTabbar></myTabbar>
  </div>
</template>

<script>
import myTabbar from '../components/tabbar/Tabbar.vue'
import App from '../App'
import { XHeader, Divider, VChart, VPoint, VTooltip, VLegend, VBar, VPie, VGuide, VLine, VScale, Grid, GridItem } from 'vux'
// import Vue from 'vue'

// Vue.use(myTabbar)

const data = [
  { name: '正确', percent: 99, a: '1' },
  { name: '错误', percent: 1, a: '1' }
]

const map = {}
data.map(obj => {
  map[obj.name] = obj.percent + '%'
})

export default {
  name: 'Home',
  components: {
    myTabbar: myTabbar,
    App,
    XHeader,
    Divider,
    VChart,
    VPoint,
    VTooltip,
    VLegend,
    VBar,
    VPie,
    VGuide,
    VLine,
    VScale,
    Grid,
    GridItem
  },
  data () {
    return {
      col: 3,
      map,
      htmlOptions: {
        position: [ '50%', '45%' ],
        html: `
          <div style="width: 250px;height: 40px;text-align: center;">
            <div style="font-size: 16px">今日学习</div>
            <div style="font-size: 24px">18题</div>
          </div>`
      },
      legendOptions: {
        position: 'right',
        itemFormatter (val) {
          return val + '  ' + map[val]
        }
      },
      yOptions: {
        formatter (val) {
          return val * 100 + '%'
        }
      },
      data,
      onShow (ev) {
        const { items } = ev
        items[0].name = null
        items[0].value = items[0].value + '题'
      },
      sevenData: [
        { day: '周一', value: 300 },
        { day: '周二', value: 400 },
        { day: '周三', value: 350 },
        { day: '周四', value: 500 },
        { day: '周五', value: 490 },
        { day: '周六', value: 600 },
        { day: '周日', value: 900 }
      ]
    }
  },
  methods: {
    onItemClick (type) {
      console.info(type)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
